<script setup>
  import { ref, getCurrentInstance, onMounted } from "vue";
  import { useRouter } from "vue-router";

  // import VuePdfApp from "vue3-pdf-app";
  // import 'vue3-pdf-app/dist/icons/main.css';

  import { CircleClose } from "@element-plus/icons-vue";

  // import LuckyExcel from "luckyexcel";

  const props = defineProps({
    ftype: {
      type: String,
      default: "", //IMG,
    },
    fpath: {
      type: String,
      default: "",
    },
    fname: {
      type: String,
      default: "",
    },
  });

  // const pageScale = ref("page-fit");
  // const theme = ref("light");
  // const viewerWidth = ref("100%");
  // const viewerHeight = ref("100%");

  const emit = defineEmits(["closeClick"]);

  const { proxy } = getCurrentInstance();

  const route = useRouter();

  //const externalViewTypes = ['EXCEL', 'WORD', 'PDF', 'PPT']
  const externalViewTypes = ['EXCEL', 'WORD', 'PPT']

  onMounted(() => {
  });


  const closeHandleClick = function () {
    emit("closeClick");
  };
</script>

<template>
  <div class="file-preview-layer">
    <div class="title">
      <span>{{ props.fname }}</span>
    </div>
    <div class="close" @click="closeHandleClick">
      <el-icon color="#666666" :size="25">
        <CircleClose />
      </el-icon>
    </div>
    <div class="file-preview-content">

      <!--视频预览-->
      <div class="file-preview-video" v-if="props.ftype === 'VIDEO'">
        <video crossorigin="anonymous" controls loop muted>
          <source :src="props.fpath" type="video/mp4" />
        </video>
      </div>

      <!--图片预览-->
      <div class="file-preview-img" v-else-if="props.ftype === 'IMG'">
        <el-image style="width: 100%; height: 100%" :src="props.fpath" fit="contain"
          :preview-src-list="[props.fpath]" />
      </div>

      <!--TXT-->
      <div class="file-preview-txt" v-else-if="props.ftype === 'TXT'">
        <iframe frameborder="no" :src="`https://view.xdocin.com/view?src=${props.fpath}`"></iframe>
      </div>

      <div class="file-preview-word" v-else-if="externalViewTypes.includes(props.ftype)">
        <!--wps在线预览服务-->
        <!-- <iframe frameborder="no" :src="`https://wps-view.zhihuipk.com/?src=${props.fpath}`"></iframe> -->

        <!--微软在线预览服务-->
        <iframe frameborder="no" :src="`https://view.officeapps.live.com/op/view.aspx?src=${props.fpath}`"></iframe>
      </div>

      <div class="file-preview-word" v-else-if="props.ftype === 'PDF'">
        <!--wps在线预览服务-->
        <iframe frameborder="no" :src="`https://wps-view.zhihuipk.com/?src=${props.fpath}`"></iframe>
        <!-- <VuePdfApp :page-scale="pageScale" :theme="theme" :style="`width: ${viewerWidth}; height: ${viewerHeight};`"
          :pdf="props.fpath" :fileName="props.fname"></VuePdfApp> -->
      </div>

      <!--无法预览下载后查看-->
      <div v-else>
        <el-result icon="warning" title="提示" sub-title="该格式无法在线预览，请下载后查看！">
        </el-result>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .file-preview-layer {
    width: 100%;
    height: calc(100vh - 85px);
    overflow-x: hidden;
    overflow-y: auto;
    font-family: SourceHanSansSC;
    position: relative;
    background: #ffffff;
    border-radius: 6px;

    .close {
      position: absolute;
      right: 20px;
      top: 10px;
      cursor: pointer;
      z-index: 9;
    }

    .title {
      margin: auto;
      width: 97%;
      height: 50px;
      color: #303030;
      font-size: 16px;
      font-weight: bold;
      line-height: 50px;
      border-bottom: 1px #eeeeee solid;
      box-sizing: border-box;

      .tip {
        font-size: 12px;
        color: #f56c6c;
        font-weight: normal;
      }
    }

    .file-preview-content {
      width: 100%;

      >div {
        width: 100%;
        height: calc(100vh - 135px);
        padding: 10px 20px;
        box-sizing: border-box;
        overflow: hidden;

        iframe {
          width: 100%;
          height: 100%;
        }

        video {
          width: 100%;
          height: 100%;
          object-fit: fill;
        }
      }
    }
  }
</style>